<template>
  <div class="homeCon1">
    <div class="homeCon1-banner">
      <div class="bannerLeft">
        <div class="index-fit">
          <!-- 下一页 -->
          <div class="swiper-button-next" slot="button-prev"></div>
          <!-- 上一页 -->
          <div class="swiper-button-prev" slot="button-next"></div>
        </div>
      </div>
      <div class="bannerRight">
        <swiper ref="mySwiper" :options="swiperOption">
          <swiper-slide v-for="(item, index) in 6" :key="index">
            <div class="pit-box">slide{{ index }}</div>
          </swiper-slide>
          <!-- 分页器 -->
          <!-- <div slot="pagination" class="swiper-pagination">
            <span class="swiper-pagination-current"></span><span>"/"</span><span class="swiper-pagination-total"></span>
          </div> -->
        </swiper>
      </div>
    </div>
  </div>
</template>
 
<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";
export default {
  name: 'HomeSwiper',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        // 衔接滑动
        loop: true,
        // 自动滑动
        autoplay: {
          delay: 300000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slidesPerView: 3,
        spaceBetween: 20,
        slideToClickedSlide: true,
        // 使用前进后退按钮来控制Swiper切换。
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        pagination: {
          el: '.swiper-pagination', //与slot="pagination"处 class 一致
          clickable: true,
          type: 'fraction',
        },
      },
    }
  }
}
</script>
 
<style lang="scss" scoped>
.bannerRight {
  height: 100px;
  .swiper-slide {
    line-height: 100px;
  }
}
</style>